﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="Secondhand_Book_Trade.index" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>首页-高校二手书平台</title>
    <link href="CSS/common.css" rel="stylesheet" type="text/css" />
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
    <style>
        .main-container {
            margin: 30px auto;
            max-width: 1200px;
        }

        .left-panel {
            width: 250px;
            float: left;
        }

        .right-panel {
            width: 250px;
            float: right;
        }

        .center-panel {
            margin: 0 270px;
        }

        .book-row {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
        }

        .book-img {
            width: 140px;
            height: 160px;
            object-fit: cover;
            margin-right: 12px;
            flex-shrink: 0;
        }

        .book-title {
            font-size: 1.1em;
            flex: 1;
            word-break: break-all;
        }

        .clearfix {
            clear: both;
        }
        .section-title {
            display: inline-block;
            background: linear-gradient(90deg, #0D6EFD 0%, #e0e7ef 100%);
            border-radius: 8px;
            padding: 4px 16px;
            margin-bottom: 12px;
            font-weight: bold;
            box-shadow: 0 1px 4px rgba(0,0,0,0.04);
        }
        .xia_hua_xian a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
           <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
                <div class="container">
                    <a class="navbar-brand" href="#">高校二手书平台</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNav">
                        <ul class="navbar-nav me-auto">
                            <li class="nav-item">
                                <a class="nav-link active" href="#">首页</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">二手书列表</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">订单查询</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">用户留言</a>
                            </li>
                        </ul>
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link" href="Login.aspx">用户登录</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="AdminDashboard.aspx">后台登录</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <!-- 商品搜索区 -->
            <div class="container mt-3">
                <div class="row">
                    <div class="col-md-12">
                        <asp:DropDownList ID="ddlCategory" runat="server" CssClass="form-select d-inline-block" Width="200px"
                            DataSourceID="SqlDataSourceCategory" DataTextField="CategoryName" DataValueField="CategoryID" AppendDataBoundItems="true">
                            <asp:ListItem Value="">全部分类</asp:ListItem>
                        </asp:DropDownList>
                        <asp:TextBox ID="txtKeyword" runat="server" CssClass="form-control d-inline-block" Width="300px" placeholder="请输入关键字" />
                        <asp:Button ID="btnSearch" runat="server" Text="搜索" CssClass="btn btn-primary" OnClick="btnSearch_Click" />
                    </div>
                </div>
            </div>

            <div class="main-container">
                <!-- 左侧：分类和精品推荐 -->
                <div class="left-panel">
                    <h5 class="section-title">二手书分类</h5>
                    <asp:Repeater ID="rptCategory" runat="server" DataSourceID="SqlDataSourceCategory">
                        <ItemTemplate>
                            <div class="xia_hua_xian">
                                <a href="Index.aspx?cat=<%# Eval("CategoryID") %>"><%# Eval("CategoryName") %></a>
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>
                    <hr />
                    <h5 class="section-title">精品推荐</h5>
                    <asp:Repeater ID="rptRecommend" runat="server" DataSourceID="SqlDataSourceRecommend">
                        <ItemTemplate>
                            <div class="book-row">
                                <a href='Display.aspx?BookID=<%# Eval("BookID") %>'>
                                    <img src='<%# Eval("CoverUrl") %>' class="book-img" />
                                </a>
                                <span class="book-title"><%# Eval("Title") %></span>
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>
                </div>

                <!-- 右侧：热卖二手书 -->
                <div class="right-panel">
                    <h5 class="section-title">热卖二手书</h5>
                    <asp:Repeater ID="rptHot" runat="server" DataSourceID="SqlDataSourceHot">
                        <ItemTemplate>
                            <div class="book-row">
                                <a href='Display.aspx?BookID=<%# Eval("BookID") %>'>
                                    <img src='<%# Eval("CoverUrl") %>' class="book-img" />
                                </a>
                                <span class="book-title"><%# Eval("Title") %></span>
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>
                </div>

                <!-- 中间：二手书列表 -->
                <div class="center-panel">
                    <h5 class="section-title">二手书列表</h5>
                    <asp:GridView ID="gvBooks" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSourceBooks" CssClass="table table-bordered">
                        <Columns>
                            <asp:BoundField DataField="Title" HeaderText="书名" />
                            <asp:BoundField DataField="Author" HeaderText="作者" />
                            <asp:BoundField DataField="Price" HeaderText="价格" DataFormatString="￥{0:F2}" />
                            <asp:BoundField DataField="CategoryName" HeaderText="分类" />
                            <asp:ImageField DataImageUrlField="CoverUrl" HeaderText="封面" ControlStyle-Width="60px" ControlStyle-Height="80px" />
                            <asp:BoundField DataField="Description" HeaderText="简介" />
                        </Columns>
                    </asp:GridView>
                    <h5 class="section-title mt-4">最新上架</h5>
                    <asp:Repeater ID="rptNew" runat="server" DataSourceID="SqlDataSourceNew">
                        <ItemTemplate>
                            <div class="book-row">
                                <a href='Display.aspx?BookID=<%# Eval("BookID") %>'>
                                    <img src='<%# Eval("CoverUrl") %>' class="book-img" />
                                </a>
                                <div class="book-title">
                                    <strong><%# Eval("Title") %></strong><br />
                                    作者：<%# Eval("Author") %> &nbsp; 价格：￥<%# Eval("Price", "{0:F2}") %><br />
                                    上架时间：<%# Eval("CreatedAt", "{0:yyyy-MM-dd}") %>
                                </div>
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>
                </div>
                <div class="clearfix"></div>
            </div>

            <!-- 数据源控件 -->
            <asp:SqlDataSource ID="SqlDataSourceCategory" runat="server"
                ConnectionString="<%$ ConnectionStrings:Secondhand_book_tradeConnectionString %>"
                SelectCommand="SELECT CategoryID, CategoryName FROM Categories" />

            <asp:SqlDataSource ID="SqlDataSourceRecommend" runat="server"
                ConnectionString="<%$ ConnectionStrings:Secondhand_book_tradeConnectionString %>"
                SelectCommand="SELECT TOP 5 BookID, Title, CoverUrl FROM Books WHERE Status=1 ORDER BY NEWID()" />

            <asp:SqlDataSource ID="SqlDataSourceHot" runat="server"
                ConnectionString="<%$ ConnectionStrings:Secondhand_book_tradeConnectionString %>"
                SelectCommand="SELECT TOP 5 BookID, Title, CoverUrl FROM Books WHERE Status=1 ORDER BY Price DESC" />

            <asp:SqlDataSource ID="SqlDataSourceBooks" runat="server"
                ConnectionString="<%$ ConnectionStrings:Secondhand_book_tradeConnectionString %>"
                SelectCommand="SELECT b.BookID, b.Title, b.Author, b.Price, c.CategoryName, b.CoverUrl, b.Description
                               FROM Books b
                               LEFT JOIN Categories c ON b.CategoryID = c.CategoryID
                               WHERE b.Status=1">
            </asp:SqlDataSource>
            <asp:SqlDataSource ID="SqlDataSourceNew" runat="server"
                ConnectionString="<%$ ConnectionStrings:Secondhand_book_tradeConnectionString %>"
                SelectCommand="SELECT TOP 5 BookID, Title, Author, Price, CoverUrl, CreatedAt FROM Books WHERE Status=1 ORDER BY CreatedAt DESC" />
        </div>
    </form>
    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
